<template>
    <div class="home-content">
        <div class="home-hreder">
            <van-nav-bar title="首页" />
            <van-search
                @focus="goSearch"
                background="#fff" 
                shape="round" 
                placeholder="请输入搜索关键词" />
        </div>
        <div class="home-main">
            <div class="banner">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="it in bannerList" :key="it">
                    <img :src=it>
                </van-swipe-item>
            </van-swipe>
        </div>
         <!-- 跳转分类 -->
        <Homecategory></Homecategory>
        <!-- 通知栏 -->
        <Notifications></Notifications>
        <!-- 部分样品展示 -->
        <Countdown></Countdown>
        </div>
    </div>
</template>

<script setup>
import Homecategory from './homecategory.vue'
import Countdown from './countdown.vue'
import { getBannerList } from '../../api/homeApi.js'
import { ref,onMounted } from 'vue'
import { useRouter } from 'vue-router'
import Notifications from '../Home/notifications.vue'

const router = useRouter()
const bannerList = ref([])
// 轮播图
async function setBanner(){
    const res = await getBannerList()
        bannerList.value = res.data.map((it) => {
            return '/api' + it.path
        })
    }
//点击搜索框
function goSearch(){
    router.push('/search')
}
onMounted(()=>{
    setBanner()
})
</script>

<style scoped lang="scss">
@import '../../styles/index.scss';
.home-content{
    background: #fafafa;
    .home-hreder{
        position: sticky;
        top: 0;
        z-index: 9;
    }
    .home-main{
        height: calc(100% - 60px);
        .banner{
            padding: 15px;
        .my-swipe{
            width: 100%;
            height: 160px;
            background: $g02;
            border-radius: 10px;
            img{
                width: 100%;
                height: 160px;
            }
        }
    }
    }
}
</style>